<template>
  <div class="news">
    <div class="news-list" v-for="(item,index) in newsList" :key=index>
      <img :src="item.img_url" @click="navigateToIntro(item.id,componentsType)">
      <div class="news-title-box">
        <div class="news-title" @click="navigateToIntro(item.id,componentsType)">{{item.title}}</div>
        <div class="news-time">
          <i class="data-icon"></i>
          <span class="news-date">{{item.created_at}}</span>
        </div>
      </div>
      <p class="news-dec" @click="navigateToIntro(item.id,componentsType)">
        <wxParse :content="item.info" />
      </p>
    </div>
  </div>
</template>
<script>
import wxParse from 'mpvue-wxparse'
import { getNewsList } from '../../api/index.js'

export default {
  data(){
    return {
      newsList: [],
      limit: 8,
      page: 0,
      reachBottomFlag: true,
      componentsType: "news", //用于传值到介绍页进行判断
      filterDate:"",
    }
  },
  components:{
    wxParse
  },
  onShow(){
    this.reqNewsList();
  },
    //下拉刷新
  onPullDownRefresh () {
    this.page= 0;
    this.selcetType = 0;
    this.reachBottomFlag = true;
    this.reqNewsList();
  },
  //上拉加载
  onReachBottom () {
    if(this.reachBottomFlag){
      this.page++;
      this.reqNewsList();
    }
  },
  methods: {
    //获取最新资讯列表
    async reqNewsList() {
      let params = {
        limit:this.limit,
        page:this.page
      }
      let res = await getNewsList(params);
      if(res.data.level == "success"){
        //包装后台返回的时间
        let data = res.data.data;
        wx.stopPullDownRefresh()
        data.map((item,index) => {
          let arrTime = item.created_at.split(" ");
          let arrDate = arrTime[0].split("-");
          item.created_at = `${arrDate[0]}年${arrDate[1]}月${arrDate[2]}日`;
        });
        if(data.length == 0){
          this.reachBottomFlag = false;
        }else{
          if(params.page == 0){
            this.newsList = data;
          }else{
            this.newsList = this.newsList.concat(data);
          }
        }
      }else{
        wx.showToast({
          title: '获取最新资讯失败',
          icon: 'none',
          duration: 1000
        })
      }
    },
    //跳转详情页面
    navigateToIntro(newsListId,componentsType){
      wx.navigateTo({
        url: '/pages/intro/main?id='+ newsListId + '&componentsType=' + componentsType
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
  @import url("~mpvue-wxparse/src/wxParse.css");
  .news
    width 100%
    background-color #f1f1f1
    .news-list
      background-color #fff
      margin-bottom 20rpx
      padding-top 10rpx
      padding-bottom 20rpx
      img
        width 100%
        height 450rpx
    .news-title-box
      display flex
      justify-content space-between
      align-items center
      padding 16rpx 20rpx 22rpx
      .news-title
        flex 3
        font-size 14px
        font-weight bold
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap
      .news-time
        flex 2
        display flex
        justify-content flex-end
        .data-icon
          width 28rpx
          height 28rpx
          background-image url(../../../static/images/time.png)
          background-repeat no-replace
          background-size 28rpx 28rpx
          background-position center center
          margin-right 8rpx
        .news-date
          font-size 13px
          color #b1b1b1
    .news-dec
      font-size 12px
      line-height 40rpx
      padding 0 20rpx
      margin-top -1em
      overflow hidden
      color #888
      text-overflow ellipsis
      display -webkit-box
      -webkit-line-clamp 3
      -webkit-box-orient vertical
</style>